<template>
  <div>
    <nut-row>
      <nut-noticebar
        :closeMode="true"
        @click="clickHandler"
      >仅供学习参考，不得用于商业目的
      </nut-noticebar>
    </nut-row>
    <div style="height: 0.3rem"></div>
    <nut-row>
      <nut-swiper
        direction="horizontal"
        ref="demo3"
        :loop="true"
        :canDragging="true"
        :paginationVisible="true"
        :autoPlay="2000"
      >
        <div  class="nut-swiper-slide gray" >
          <img src="http://www.bgly20.cn/qingdao/pc/001/image/001.jpg" class="nut-swiper-slide nut-swiper-slide-selected">
        </div>
        <div  class="nut-swiper-slide gray_1" >
          <img src="http://ctrip.dkatour.com/upload/201907/20/201907201305037048.png" class="nut-swiper-slide nut-swiper-slide-selected">
        </div>
        <div  class="nut-swiper-slide gray" >
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2132391476,3082680512&fm=26&gp=0.jpg" class="nut-swiper-slide nut-swiper-slide-selected">
        </div>
      </nut-swiper>
    </nut-row>
    <div style="height: 0.3rem"></div>

  <nut-row>
    <nut-searchbar ref="seach"
      :placeText="val"
      searchIconColor="#3e2d2d"
      @focus="focusFun"
      @input="inputFun"
      @blur="blurFun"
      @submit="submitFun"
      textInfo="去水印"
    ></nut-searchbar>
  </nut-row>
    <div style="height: 0.3rem"></div>
    <nut-row>
      <video-player  class="video-player vjs-custom-skin"
                     ref="videoPlayer"
                     :playsinline="true"
                     :options="playerOptions"
                     @play="onPlayerPlay($event)"
                     @pause="onPlayerPause($event)"
                     v-if="tt"
      >
      </video-player>
    </nut-row>




  </div>


</template>
<script>
  import { videoPlayer } from 'vue-video-player';


  export default {

    name: 'DouYin',
    data () {
      return {
        timeOutEvent: 0,
        dataImgItem:[],
        isVisible: true,
        isVisible1: true,
        isVisible2: false,
        isVisible3: false,
        date: null,
        dateWeek: null,
        isShow: true,
        tt: false,
        val: '请输入分享链接',
        val2:'',
        isShow2:false,
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: true, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "video/mp4",
            src: "" //你的m3u8地址（必填）
          }],
          poster: "", //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
           controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true //全屏按钮
           }
        }
      }
    },
    components: {
      videoPlayer
    },
    methods: {


      clickHandler () {
        this.$vux.alert.show({
          title: '谨献给',
          content: '可爱的小杨丹~~',
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            console.log('Plugin: I\'m hiding')
          }
        })
      },
      onPlayerPlay(player) {
       // alert("play");
      },
      onPlayerPause(player){
      //  alert("pause");
      },
      focusFun() {
        console.log('获取焦点操作！');
      },
      inputFun(value) {
        console.log('您正在输入...');
      },
      blurFun(value) {
        console.log('您已失去焦点！');


      },
      submitFun(value) {
        if(value == null || value == undefined || value == '' ){
          this.$toast.text('分享链接不能为空！',{
            duration: 3000, //展示时长
            center: true, //是否居中展示，值为false时展示在页面底部
            //  bottom: 40, //展示在页面底部时，距底部的距离（px)
            textAlignCenter:true //多行文本是否居中展示，值为false时单行居中，多行居左

          });
          this.tt = false

          return
        }else if(value.indexOf("http") == -1){
          this.$toast.text('分享链接格式错误！',{
            duration: 3000, //展示时长
            center: true, //是否居中展示，值为false时展示在页面底部
            //  bottom: 40, //展示在页面底部时，距底部的距离（px)
            textAlignCenter:true //多行文本是否居中展示，值为false时单行居中，多行居左
          });
          this.tt = false
          return
        }
        this.$vux.loading.show({
          text: '转换中'
        })
        const form =
          this.$qs.stringify({'url':value});
       this.$axios.post('/douyin/api/realUrl',form).then((res) => {
         this.$refs.seach.value=res.data[0]
         this.playerOptions.sources[0].src=res.data[1]
          this.tt = true
          this.$toast.text('去水印成功啦!',{
            duration: 3000, //展示时长c63679b9-da34-4767-9a9f-04c4c9e0b750
            center: true, //是否居中展示，值为false时展示在页面底部
            //  bottom: 40, //展示在页面底部时，距底部的距离（px)
            textAlignCenter:true //多行文本是否居中展示，值为false时单行居中，多行居左
          });
          this.$vux.loading.hide()
          this.player();
        })
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    mounted(){


    }

  }
</script>

<style scoped>

</style>
